<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="主IP" prop="ip">
        <el-input v-model="queryParams.ip" placeholder="请输入主IP" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="子IP" prop="salveIp">
        <el-input v-model="queryParams.salveIp" placeholder="请输入子IP" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="位置" prop="location">
        <el-input v-model="queryParams.address" placeholder="请输入位置" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="IDC机房" prop="idcMotorRoom">
        <el-input v-model="queryParams.idcMotorRoom" placeholder="请输入IDC机房" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="防火墙" prop="firewall">
        <!-- <el-input v-model="queryParams.firewall" placeholder="请输入防火墙属性" clearable @keyup.enter.native="handleQuery" /> -->
        <el-select v-model="queryParams.firewall" clearable placeholder="请选择防火墙">
          <el-option v-for="item in opt_firewall" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="SSL使用" prop="ssl">
        <!-- <el-input v-model="queryParams.ssl" placeholder="请输入SSL使用" clearable @keyup.enter.native="handleQuery" /> -->
        <el-select v-model="queryParams.ssl" clearable placeholder="请选择SSL使用">
          <el-option v-for="item in opt_ssl" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="到期时间" prop="expireTime">
        <el-date-picker clearable v-model="queryParams.expireTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择到期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:master:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['system:master:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['system:master:remove']">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:master:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="masterList" @selection-change="handleSelectionChange" _size="small">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" width="60" />
      <el-table-column label="主IP" align="center" prop="ip" width="120" />
      <el-table-column label="子IP" align="center" prop="salveIp" width="180">
        <template slot-scope="scope">
          <el-button v-for="(item, index) in scope.row.serviceIpSlaveList" :key="item.id" v-if="index < 3"
            type="primary" size="mini" style="padding: 1px;margin: 0 2px;">{{ item.ip }}</el-button>
          <el-button type="success" size="mini" style="padding: 1px;margin: 0 2px;">({{
            scope.row.serviceIpSlaveList.length }})</el-button>
        </template>
      </el-table-column>
      <el-table-column label="机器码" align="center" prop="machineCode" />
      <el-table-column label="机柜位置" align="center" prop="location" />
      <el-table-column label="IDC机房" align="center" prop="idcMotorRoom" />
      <el-table-column label="防火墙属性" align="center" prop="firewall">
        <template slot-scope="scope">
          <span v-for="item in scope.row.sysMasterIpPropettyMap.firewall" :key="item.id">
            {{ item.twoPropettyName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线路" align="center" width="96">
        <template slot-scope="scope">
          <span v-for="item in scope.row.lineMaintenanceVOS" :key="item.id">
            {{ item.lineName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务用途" align="center">
        <template slot-scope="scope">
          <span v-for="item in scope.row.sysMasterIpPropettyMap.use" :key="item.id">
            {{ item.twoPropettyName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="租用/托管" align="center">
        <template slot-scope="scope">
          <span v-for="item in scope.row.sysMasterIpPropettyMap.rent" :key="item.id">
            {{ item.twoPropettyName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="硬件信息" align="center" prop="hardware" />
      <el-table-column label="宽带信息" align="center">
        <template slot-scope="scope">
          <span v-for="item in scope.row.sysMasterIpPropettyMap.bandwidth" :key="item.id">
            {{ item.twoPropettyName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="SSL使用" align="center" width="80">
        <template slot-scope="scope">
          <!-- <span v-for="item in scope.row.sysMasterIpPropettyMap.ssl" :key="item.id">
            {{ item.twoPropettyName }}</span> -->
          <el-tag v-if="scope.row.sysMasterIpPropettyMap.ssl.length" type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" align="center" prop="addTime" width="96">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到期时间" align="center" prop="expireTime" width="96">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />


      <!-- <el-table-column label="位置" align="center" prop="location" />
      <el-table-column label="IDC机房位置" align="center" prop="idcMotorRoom" />
      <el-table-column label="添加时间" align="center" prop="addTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到期时间" align="center" prop="expireTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="硬件信息" align="center" prop="hardware" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="默认0 0正常； 1删除" align="center" prop="isDel" />
      <el-table-column label="默认0 0正常； 1使用" align="center" prop="useStatus" />
      <el-table-column label="编号" align="center" prop="code" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="170">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-search" @click="handleShow(scope.row)"
            v-hasPermi="['system:master:edit']">查看</el-button> -->
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:master:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-folder-add" @click="ipAdmin_init(scope.row)"
            v-hasPermi="['system:master:manager']">IP管理</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:master:remove']" style="padding: 5px;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 添加或修改主IP对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-tabs v-model="tabIndex" :before-leave="handleTabChange">
        <el-tab-pane label="基本设置" name="1">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="机器码" prop="machineCode">
              <el-input v-model="form.machineCode" placeholder="请输入机器码" />
            </el-form-item>
            <el-form-item label="机柜位置" prop="location">
              <el-input v-model="form.location" placeholder="请输入机柜位置" />
            </el-form-item>
            <el-form-item label="IDC机房" prop="idcMotorRoom">
              <el-input v-model="form.idcMotorRoom" placeholder="请输入IDC机房" />
            </el-form-item>
            <el-form-item label="主IP" prop="ip">
              <el-input v-model="form.ip" placeholder="请输入主IP" :disabled="this.title === '修改主IP'" />
            </el-form-item>
            <el-form-item label="添加时间" prop="addTime">
              <el-date-picker clearable v-model="form.addTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择添加时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="到期时间" prop="expireTime">
              <el-date-picker clearable v-model="form.expireTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择到期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="硬件信息" prop="hardware">
              <el-input type="textarea" v-model="form.hardware" placeholder="请输入硬件信息" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="属性设置" name="2" v-if="title != '新增服务器IP'">
          <el-form ref="form2" :model="propettyFrom" :rules="rules" label-width="120px">
            <div class="tab2" v-for="(item, i) in propettyFrom.propettyList" :key="i">
              <el-form-item :label="item.name">
                <!-- 多选 -->
                <template v-if="item.chooseType == 1">
                  <el-checkbox-group v-model="item.select" @input="changeCheckbox($event, 1)">
                    <el-checkbox v-for="rad in item.sysTwoPropettyVModelList" :key="rad.id" :label="rad.id">{{ rad.name
                      }}</el-checkbox>
                  </el-checkbox-group>
                </template>
                <!-- 单选 -->
                <template v-else>
                  <el-radio-group v-model="item.select" @input="changeRadio($event, 1)" :disabled="item.edit == 2">
                    <el-radio v-for="rad in item.sysTwoPropettyVModelList" :key="rad.id" :label="rad.id">{{
                      rad.name }}</el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改主IP对话框 -->
    <!-- <el-dialog :title="titleSecond" :visible.sync="openSecond" width="60%" append-to-body>
      <el-table ref="table2" :data="secondList" :show-header=false class="secondTable" v-loading="secondLoading">
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="IP" align="center" prop="sort" >
          <template slot-scope="item">{{ item.row.ip }}{{{1:'主',2:'子'}[item.row.type] }} {{ item.row.type }}</template>
        </el-table-column>
        <el-table-column label="用途" align="center" prop="parentId" />
        <el-table-column label="级别" align="center" prop="level" />
        <el-table-column label="线路名称" align="center" prop="lineName" />
        <el-table-column label="线路编号" align="center" prop="lineCode" />
        <el-table-column label="线路类型" align="center" prop="lineType" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="third">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(third.row)"
              v-hasPermi="['system:maintenance:edit']">配置属性</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(third.row)"
              v-hasPermi="['system:maintenance:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog> -->

    <!-- firewall		int	防火墙
   line		List<?>	线路
   use		List<?>	用途 
   rent		List<?>.	租用/托管
   bandwidth		List<?>.	带宽
   ssl		List<?>.	ssl是否使用
   czxt		List<?>	操作系统
   isp		List<?>	ISP -->


    <el-dialog title="IP管理" :visible="ipAdmin_list_is" width="80%" @close="setFalse('ipAdmin_list_is')">
      <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="ipAdmin_add_func()"
        v-hasPermi="['system:master:add']">新增</el-button>
      <el-button size="mini" type="primary" @click="handleSizeChange(10)">重置</el-button>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="ipAdmin_pageSize"
        :current-page="ipAdmin_pageNum" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
        :total="IpAdmin_list_total"></el-pagination>
      <el-table :data="IpAdmin_list" border>
        <el-table-column prop="id" label="id" width="60">
        </el-table-column>
        <el-table-column prop="ip" label="IP" width="160">
          <template slot-scope="item">{{ item.row.ip }}<el-button v-if="item.row.type == 1" type="success" size="mini"
              style="padding: 1px;margin: 0 2px;">主</el-button></template>
        </el-table-column>
        <el-table-column prop="use" label="用途">
          <template slot-scope="scope">
            <el-button v-for="(item, index) in (scope.row.sysMasterIpPropettyMap.use || []).map(e => e.twoPropettyName)"
              :key="index" type="primary" size="mini" style="padding: 1px;margin: 0 2px;">{{ item }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="czxt" label="操作系统" width="100">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in (scope.row.sysMasterIpPropettyMap.czxt || []).map(e => e.twoPropettyName)"
              :key="index" type="primary" size="mini" style="padding: 1px;margin: 0 2px;">{{ item }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="isp" label="ISP">
          <template slot-scope="scope">
            <el-button v-for="(item, index) in (scope.row.sysMasterIpPropettyMap.isp || []).map(e => e.twoPropettyName)"
              :key="index" type="primary" size="mini" style="padding: 1px;margin: 0 2px;">{{ item }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="bandwidth" label="带宽" width="120">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in (scope.row.sysMasterIpPropettyMap.bandwidth || []).map(e => e.twoPropettyName)"
              :key="index" type="primary" size="mini" style="padding: 1px;margin: 0 2px;">{{ item }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="适用增值" width="100">
          <template slot-scope="scope">
            <el-button v-for="(item, index) in (scope.row.sysMasterIpPropettyMap.ssl || []).map(e => e.twoPropettyName)"
              :key="index" type="primary" size="mini" style="padding: 1px;margin: 0 2px;">{{ item }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <el-button v-if="scope.row.type != 1" size="mini" type="text" icon="el-icon-search"
              @click="ipAdmin_edit(scope.row)" v-hasPermi="['system:master:edit']">配置属性</el-button>
            <el-button v-if="scope.row.type != 1" size="mini" type="danger" icon="el-icon-delete"
              @click="ipAdmin_del(scope.row)" v-hasPermi="['system:master:edit']" style="padding: 5px;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="IP管理 添加子IP" :visible="ipAdmin_add_is" @close="setFalse('ipAdmin_add_is')">

      <el-form :model="ruleForm" :rules="rulesIp" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="IP" prop="ip">
          <el-input v-model="ruleForm.ip"></el-input>
        </el-form-item>
        <!-- <el-form-item label="主IP主键ID" prop="masterId">
          <el-input v-model="ruleForm.masterId" readonly></el-input>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="ipAdmin_add_submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="ipAdmin_add_resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="IP管理 配置属性" :visible="ipAdmin_edit_is" @close="setFalse('ipAdmin_edit_is')" width="80%">
      <el-form ref="form2" :model="propettyFrom" :rules="rules" label-width="80px">
        <div class="tab2" v-for="(item, i) in propettyFrom.propettyList" :key="i">
          <el-form-item :label="item.name">
            <!-- 多选 -->
            <template v-if="item.chooseType == 1">
              <el-checkbox-group v-model="item.select" @input="changeCheckbox($event, 1)">
                <el-checkbox v-for="rad in item.sysTwoPropettyVModelList" :key="rad.id" :label="rad.id">{{ rad.name
                  }}</el-checkbox>
              </el-checkbox-group>
            </template>
            <!-- 单选 -->
            <template v-else>
              <el-radio-group v-model="item.select" @input="changeRadio($event, 1)" :disabled="item.edit == 2">
                <el-radio v-for="rad in item.sysTwoPropettyVModelList" :key="rad.id" :label="rad.id">{{
                  rad.name }}</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
        </div>
        <el-form-item label="主IP:">
          <el-checkbox-group v-model="isExtendsMaster" @input="changeCheckbox($event, 1)">
            <el-checkbox :label="1">子IP继承主IP属性</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ipAdmin_edit_submitForm('ruleForm')">保存</el-button>
          <el-button @click="ipAdmin_edit_resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listMaster, listPropetty, propettyMaster, getMaster, delMaster, addMaster, updateMaster, putIpPropetty, getMasterPropettyList } from "@/api/system/master";
import { listPagePropetty, } from "@/api/system/one/propetty";
const IPv4 = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)((\.)(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}(-(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d))?$/
export const is_ip_rule = (rule, value, callback) => {
  // const regex = IPv4_IPv6_CIDR
  if (value === '' || !value) {
    callback()
  } else if (!IPv4.test(value)) {
    callback(new Error('请输入合法 IPv4地址。'))
  } else {
    callback()
  }
}
export default {
  name: "Master",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 主IP表格数据
      masterList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 1,
        ip: null,
        location: null,
        idcMotorRoom: null,
        addTime: null,
        address: null,
        expireTime: null,
        hardware: null,
        isDel: null,
        useStatus: null,
        code: null
      },
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        machineCode: [{ required: true, message: "机器码不能为空", trigger: "blur" }],
        ip: [{ required: true, message: "ip不能为空", trigger: "blur" }],
        location: [{ required: true, message: "位置不能为空", trigger: "blur" }],
        idcMotorRoom: [{ required: true, message: "IDC机房不能为空", trigger: "blur" }],
        addTime: [{ required: true, message: "添加时间不能为空", trigger: "blur" }],
        expireTime: [{ required: true, message: "到期时间不能为空", trigger: "blur" }],
        hardware: [{ required: true, message: "硬件信息不能为空", trigger: "blur" }],
      },
      tabIndex: '1',
      propettyFrom: {
        propettyList: [],  // 属性设置项
      },
      openSecond: false,
      titleSecond: '服务器IP属性管理',
      secondList: [],
      secondLoading: false,

      // 是否显示弹出层 IP明细管理
      ipAdmin_list_is: false,
      ipAdmin_masterId: undefined,
      ipAdmin_list_ipid: undefined,
      IpAdmin_list: [],
      IpAdmin_list_total: '',
      ipAdmin_pageSize: 10,
      ipAdmin_pageNum: 1,
      ipAdmin_edit_is: false,
      ipAdmin_edit_ipid: undefined,
      ipAdmin_add_is: false,

      ruleForm: { ip: '', type: 2, masterId: '' },
      rulesIp: {
        ip: [
          { required: true, message: "ip不能为空", trigger: "blur" },
          // { required: true, validator: is_ip_rule, trigger: 'blur' }
        ],
      },

      isExtendsMaster: [],
      opt_firewall: [],
      opt_ssl: [],
    };
  },
  created() {
    this.getList();
    listPagePropetty().then(response => {
      const propettyList = response.data || [];
      console.log(propettyList)
      propettyList.forEach(item => {
        if (item.chooseType == 1) {
          item.select = [];
        } else {
          item.select = '';
        }
        if (Array.isArray(item.sysTwoPropettyVModelList))
          item.sysTwoPropettyVModelList.forEach(obj => {
            if (item.name === "带宽" && obj.unit) obj.name += obj.unit
            obj.checked = false;
          });
      });
      const optIpData = { 0: {} }
      propettyList.forEach(item => {
        optIpData[0][item.id] = item.name
        optIpData[item.id] = {}
        if (Array.isArray(item.sysTwoPropettyVModelList))
          item.sysTwoPropettyVModelList.forEach(obj => {
            optIpData[item.id][obj.id] = obj.name
          });
      });
      this.optIpData = optIpData
      this.optIpStr = JSON.stringify(propettyList)
      this.propettyFrom.propettyList = JSON.parse(this.optIpStr)
    });
    listPropetty({ propetty: '防火墙' }).then(res => {
      this.opt_firewall = res.data.map(e => {
        const { id, name } = e
        return { id, name }
      })// 
    })
    listPropetty({ propetty: '适用增值' }).then(res => {
      this.opt_ssl = res.data.map(e => {
        const { id, name } = e
        return { id, name }
      })
    })
    // /system/master/list/propetty
  },
  methods: {
    setFalse(val) {
      this[val] = false
    },
    /** 新增子IP */
    ipAdmin_add_func() {
      this.ruleForm = { ip: '', type: 2, masterId: this.ipAdmin_masterId }
      this.ipAdmin_add_is = true
      // addTwoPropetty
    },
    ipAdmin_add_submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // alert('submit!' + JSON.stringify(this.ruleForm));
          addMaster(this.ruleForm).then(e => {
            this.$modal.msgSuccess("添加成功");
            this.ipAdmin_get_list()
            this.ipAdmin_add_is = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    ipAdmin_add_resetForm() {
      this.ruleForm = { ip: '', type: 2, masterId: this.ipAdmin_masterId }
    },
    handleSizeChange(e) {
      this.ipAdmin_pageSize = e;
      this.ipAdmin_pageNum = 1
      this.ipAdmin_get_list()
    },
    handleCurrentChange(e) {
      this.ipAdmin_pageNum = e;
      this.ipAdmin_get_list()
    },
    ipAdmin_get_list() {
      listMaster({ masterId: this.ipAdmin_list_ipid, pageSize: this.ipAdmin_pageSize, pageNum: this.ipAdmin_pageNum }).then(e => {
        this.IpAdmin_list = e.rows
        this.IpAdmin_list_total = e.total
      })
    },
    ipAdmin_init(e) {
      console.log('IP管理', e)
      this.ipAdmin_list_is = true
      this.ipAdmin_list_ipid = e.id
      this.ipAdmin_masterId = e.id
      this.ipAdmin_get_list()
      // alert('新增子IP')
    },
    ipAdmin_del(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除子IP编号为"' + id + '"的数据项？').then(() => {
        return delMaster(id);
      }).then(() => {
        this.ipAdmin_get_list();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    ipAdmin_edit_submitForm() {
      let oForm = [];
      this.propettyFrom.propettyList.forEach(item => {
        if (item.select) (Array.isArray(item.select) ? item.select : [item.select]).forEach(twoid => {
          oForm.push({
            ipId: this.ipAdmin_edit_ipid,
            twoPropettyId: twoid,
            twoPropettyName: this.optIpData[item.id][twoid],
            onePropettyId: item.id,
            onePropettyName: this.optIpData[0][item.id],
            type: 2,
          });
        });
      });
      oForm.push({
        ipId: this.ipAdmin_edit_ipid,
        type: 2,
        isExtendsMaster: this.isExtendsMaster.length
      })

      putIpPropetty(oForm).then(e => {
        this.ipAdmin_get_list()
        this.propettyFrom.propettyList = JSON.parse(this.optIpStr)
        this.$modal.msgSuccess(e.msg);
        this.ipAdmin_edit_is = false
      })
    },
    ipAdmin_edit(row) {
      console.log('ipAdmin_edit', row)
      this.isExtendsMaster = row.isExtendsMaster ? [1] : []
      this.ipAdmin_edit_ipid = row.id;
      this.propettyFrom.propettyList = JSON.parse(this.optIpStr)
      this.ipAdmin_edit_is = true
      getMasterPropettyList({ ipId: row.id, type: 2 }).then(res => {
        console.log(res.data)

        const propettyList = JSON.parse(this.optIpStr)
        for (const k in res.data) {
          const ipArr = res.data[k]
          ipArr.forEach(e => {
            propettyList.forEach(v => {
              if (v.isExtendsMaster) this.isExtendsMaster = [1]
              if (v.id === e.onePropettyId) {
                if (Array.isArray(v.select)) {
                  v.select.push(e.twoPropettyId)
                } else {
                  v.select = e.twoPropettyId
                }
              }
            })
          })
        }
        this.propettyFrom.propettyList = propettyList
      })
    },
    ipAdmin_edit_close() {
      this.ipAdmin_edit_is = false
    },
    initOpt() {
      this.propettyFrom.propettyList = JSON.parse(this.optIpStr)
    },
    changeCheckbox() { },
    changeRadio() { },
    handleTabChange(tabIndex) {
      // return false;
    },
    /** 查询主IP列表 */
    getList() {
      this.loading = true;
      listMaster(this.queryParams).then(response => {
        const arr = ['firewall', 'line', 'use', 'rent', 'bandwidth', 'ssl', 'czxt', 'isp']
        response.rows.forEach(e => {
          if (!e.sysMasterIpPropettyMap) e.sysMasterIpPropettyMap = {}
          arr.forEach(v => {
            if (!Array.isArray(e.sysMasterIpPropettyMap[v])) e.sysMasterIpPropettyMap[v] = []
          })
        })
        this.masterList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        ip: null,
        machineCode: null,
        location: null,
        idcMotorRoom: null,
        addTime: null,
        expireTime: null,
        hardware: null,
        remark: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        isDel: null,
        useStatus: null,
        code: null,
        type: 1
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        type: 1,
        ip: null,
        location: null,
        idcMotorRoom: null,
        addTime: null,
        address: null,
        expireTime: null,
        hardware: null,
        isDel: null,
        useStatus: null,
        code: null
      }
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.tabIndex = '1'
      this.title = "新增服务器IP";
      this.propettyFrom.propettyList = JSON.parse(this.optIpStr)
    },
    handleShow() {

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getMaster(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改主IP";
        const { id, type } = response.data
        getMasterPropettyList({ ipId: id, type: 1 }).then(res => {
          console.log(res.data)
          const propettyList = JSON.parse(this.optIpStr)
          for (const k in res.data) {
            const ipArr = res.data[k]
            ipArr.forEach(e => {
              propettyList.forEach(v => {
                if (v.id === e.onePropettyId) {
                  if (Array.isArray(v.select)) {
                    v.select.push(e.twoPropettyId)
                  } else {
                    v.select = e.twoPropettyId
                  }
                }
              })
            })
          }
          this.propettyFrom.propettyList = propettyList
        })
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (this.tabIndex == 1) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateMaster(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addMaster(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      } else {
        let propettyList = this.propettyFrom.propettyList;
        let flag = false;
        for (var i = 0; i < propettyList.length; i++) {
          if (propettyList[i].select.length == 0) {
            break;
          }
        }
        if (flag) {
          this.$model.msg(propettyList[i].name + '还未配置属性');
          return;
        } else {
          let oForm = [];
          propettyList.forEach(item => {
            if (item.select) (Array.isArray(item.select) ? item.select : [item.select]).forEach(twoid => {
              oForm.push({
                ipId: this.form.id,
                twoPropettyId: twoid,
                twoPropettyName: this.optIpData[item.id][twoid],
                onePropettyId: item.id,
                onePropettyName: this.optIpData[0][item.id],
                type: 1
              });
            });
          });
          putIpPropetty(oForm).then(e => {
            this.propettyFrom.propettyList = JSON.parse(this.optIpStr)
            this.$modal.msgSuccess(e.msg);
            this.open = false;
            this.getList();
          })
        }
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除主IP编号为"' + ids + '"的数据项？').then(function () {
        return delMaster(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/master/export', {
        ...this.queryParams
      }, `master_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss">
//  style="font-size: 80%;"
.tab2 .el-form-item {
  margin-bottom: 0;

  .el-checkbox__label {
    padding-left: 4px;
  }

  .el-checkbox {
    margin-right: 20px;
  }

  .el-radio__label {
    padding-left: 4px;
  }

  .el-radio {
    margin-right: 20px;
  }
}
</style>
